簡要

現在要邁入第三個頁面
第三個頁面是過去訂單
裡面是可以左右滑動
應該是使用UISegmentedControl與UIPageViewController
裡面塞入兩個ViewController
來看看原生的Uber eat效果

UISegmentedControl

UISegmentedControl就是APP中很常使用的
一排式的按鈕
自動可以做到左右滑軌效果
選中哪個Button就會有特效滑動過去
那我們就先來新增UISegmentedControl

宣吿

var segmentedControl = UISegmentedControl()

addView

segmentedControl設置items
也就是上面的Button數量
新增越多segmentedControl上得按鈕越多

override func viewDidLoad() {
    super.viewDidLoad()
    segmentedControl = UISegmentedControl(items: ["過去的訂單","即將推出"])
    segmentedControl.backgroundColor = UIColor.lightGray
    segmentedControl.frame = CGRect.init(x: 0, y: 44, width: self.view.frame.width, height: 30)
    segmentedControl.addTarget(self, action: #selector(segmentedChange), for: .valueChanged)
    self.view.addSubview(segmentedControl)
}

segmentedControl點擊事件

點擊事件要新增segmentedChange
可以看selectedSegmentIndex 點擊的index
或是Button的文字titleForSegment

@objc func segmentedChange(sender: UISegmentedControl) {
    // index
    print(sender.selectedSegmentIndex)

    // 文字
    print(sender.titleForSegment(at: sender.selectedSegmentIndex)!)    
}

Demo

UIPageViewController

UIPageViewController就是下面兩個滑動的View
有手勢可以左右滑動 切換View
也可以連動UISegmentedControl做控制
互相配合到正確的index

宣告

• viewControllerArr 負責儲存你所有的controller
• selectedIndex 負責儲存現在點擊或切換的index

var pageViewControl = UIPageViewController()
var viewControllerArr = Array<UIViewController>()
var selectedIndex: Int = 0

viewDidLoad

新增到addChild以及addSubview

pageViewControl = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
pageViewControl.view.frame = CGRect.init(x: 0, y: 74, width: self.view.frame.width, height: self.view.frame.height - 74)
pageViewControl.delegate = self
pageViewControl.dataSource = self
pageViewControl.isEditing = true
self.addChild(pageViewControl)
self.view.addSubview(pageViewControl.view)

UIViewController新增兩個簡單的
只是View的顏色做區別
新增到陣列裡面
然後 setViewControllers一個首頁

let viewController1 = UIViewController()
viewController1.view.backgroundColor = UIColor.init(red: 1, green: 0.2, blue: 0.4, alpha: 0.3)
viewController1.view.tag = 0

let viewController2 = UIViewController()
viewController2.view.backgroundColor = UIColor.init(red: 0.4, green: 0.3, blue: 1, alpha: 0.3)
viewController2.view.tag = 1

viewControllerArr.append(viewController1)
viewControllerArr.append(viewController2)

pageViewControl.setViewControllers([viewControllerArr[0]], direction: .forward, animated: false)

pageViewController func

他的func裡面

• viewControllerBefore 從左往右滑
• viewControllerAfter 從右往左滑

裡面要設置不要超出你的Array的一些防呆
以及紀錄你滑動後的index
並且也要使用selectedSegmentIndex來連動segmentedControl

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
    
    selectedIndex = viewController.view.tag
    segmentedControl.selectedSegmentIndex = selectedIndex
    let pageIndex = viewController.view.tag - 1
    if pageIndex < 0 {
        return nil
    }
    return viewControllerArr[pageIndex]
}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
    
    selectedIndex = viewController.view.tag
    segmentedControl.selectedSegmentIndex = selectedIndex
    let pageIndex = viewController.view.tag + 1
    if pageIndex > 1 {
        return nil
    }
    return viewControllerArr[pageIndex]
}

segmentedChange

segmentedChange 也要新增連動pageViewControl
使用setViewControllers就可以了

@objc func segmentedChange(sender: UISegmentedControl) {
    // index
    print(sender.selectedSegmentIndex)
    // 文字
    print(sender.titleForSegment(at: sender.selectedSegmentIndex)!)
    pageViewControl.setViewControllers([viewControllerArr[sender.selectedSegmentIndex]], direction: .forward, animated: false)
}

Demo

執行以後發現
好像動畫如果我沒做設定得話
左右滑動是翻頁效果
並不是我們想要的效果
這邊要回去初始化設定為scroll
就會變成滑動效果

pageViewControl = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)

Demo

完成 大概是這樣的效果